<template>
  <view class="selectPicker">
    <view class="header">
      <view class="line">
        <view></view>
      </view>
      <view class="title">{{ title }} </view>
      <view class="content">
        <picker-view
          class="picker-view"
          :value="selectValue"
          :immediate-change="true"
          @change="bindChange"
          v-if="showPicker"
        >
          <picker-view-column class="picker-view-column">
            <view
              :class="[
                'item',
                selectValue[0] == index ? 'pickerSelected' : ' ',
              ]"
              v-for="(item, index) in list"
              :key="index"
              >{{ item }}</view
            >
          </picker-view-column>
        </picker-view>
      </view>
      <view class="bottom">
        <view @click="handleCancel" class="cancel">取消</view>
        <view @click="handleComfire" class="comfire">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		// type: String,
	},
	data() {
		return {
			title: '',
			list: [],
			selectValue: [0],
			keyName: '',
			showPicker:false
		};
	},
	methods: {
		init(data) {
			console.log(data, '获取数据');
			this.title = data.title;
			this.list = data.list;
			this.keyName = data.name;
			this.selectValue = [data.value];
			this.showPicker = true;
		},
		bindChange(e) {
			// console.log(e);
			this.selectValue = e.detail.value;
			console.log(this.selectValue,'修噶');
		},
		// 取消按钮
		handleCancel() {
			this.$emit('close');
		},
		// 确认按钮
		handleComfire() {
			this.$emit('comfire', { key:this.keyName,val:this.selectValue[0] });
		},
	},
};
</script> 
<style lang="scss" scoped>
.selectPicker {
  background: #fff;
  .header {
    padding-top: 20rpx;
    .line {
      width: 100%;
      display: flex;
      justify-content: center;
      view {
        width: 64rpx;
        height: 10rpx;
        background: #d8d8d8;
        border-radius: 6rpx;
      }
    }
    border-bottom: 2rpx solid #eeeeee;
    .title {
      color: #333333;
      font-weight: 600;
      font-size: 32rpx;
      padding: 26rpx 40rpx 0rpx 40rpx;
      text {
        color: #999;
        font-size: 24rpx;
        font-weight: normal;
      }
    }
  }
  .content {
    padding: 16rpx 40rpx;
    padding-top: 0;
    .picker-view {
      width: 100%;
      height: 634rpx;
      color: #333;
      .item {
        // height: 86rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .pickerSelected {
      color: #0091ff;
      font-weight: 600;
    }
  }
  .bottom {
    padding: 14rpx 38rpx 26rpx 38rpx;
    border-top: 2rpx solid #eeeeee;
    display: flex;
    view {
      display: flex;
      flex: 1;
      height: 70rpx;
      justify-content: center;
      align-items: center;
    }
    .cancel {
      background: #f5fbff;
      border-radius: 0rpx 8rpx 8rpx 0rpx;
      color: #0091ff;
    }
    .comfire {
      background: #0091ff;
      border-radius: 0rpx 8rpx 8rpx 0rpx;
      color: #fff;
    }
  }
}
</style>
